<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/jquery-2.1.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            console.log("document is ready");
            //
            $("p#p1").bind('click', function () {
                $(this).hide();
            });

            //
            $("p#p2").hover(function () {
                console.log('hover on');
            }, function () {
                console.log('hover out');
            });

            //
            $('div.div1').find('button').bind('click',function(){
                console.log('click');
            });

            //
            $('[href]').hover(function(){
               console.log($(this).attr('href'));
            });
            $('[href="http://www.baidu.com"]').hover(function(){
                console.log('baidu');
            });
            $('li:first').hover(function(){
                console.log('first');
            });
            $('ol li:last').hover(function(){
                console.log('last');
            });
            $('ol li:eq(2)').hover(function(){
                console.log('index 2');
            });
        });
    </script>
</head>
<body>

<p id="p1">hello,click me to hide</p>
<p id="p2">hello,hover</p>

<div class="div1">
    <button>button</button>
    <p>abc</p>
</div>
<a href="http://www.hao123.com">hao123</a>
<br/>
<a href="http://www.baidu.com">baidu</a>

<div id="table">
    <ol>
        <li>aa</li>
        <li>aa</li>
        <li>aa</li>
        <li>aa</li>
    </ol>
</div>
</body>
</html>